<div id="activitiesPackagingLinesHistory" style="height: 100%">
    <div class="ui-layout-center">
        <div id="gantHolder"></div>    
    </div>
    <div id="timeFilter_holder" class="ui-layout-south">
    </div>
</div>
<script>
    var linesHistoryFX = function() {
        var _self = this;
        _self.perform = function() {
            $("#activitiesPackagingLinesHistory").layout({
                resizable: false,
                closable: false,
                south__size: "120"
            });

            $('.datepicker.hook_day').datepicker({
                defaultDate: new Date(),
                dateFormat: 'd.m.yy'
            }).datepicker('setDate', new Date());

            $("#timeFilter_holder").load("_parts/TimeFilter.html?x="+Math.random(), function() {
                $('.datepicker.hook_dateFrom').datepicker({
                    defaultDate: '-3m',
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', '-3m');
                $('.datepicker.hook_dateTo').datepicker({
                    defaultDate: new Date(),
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', new Date());

                //$(".timeFilter #row1 .col5").remove();
                $(".timeFilter #row2 .col5").remove();
                $(".timeFilter #row3").remove();
                $(".timeFilter #row4 .col4").remove();

                _self.loadYearsForTimeFilter();
                _self.loadLinesForTimeFilter();
            });
        };
        _self.loadYearsForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 420,
                action: 'getYears'
            },
            function(response) {
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_mYear").append("<option>" + value.availableYear + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.loadLinesForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 420,
                action: 'getLines'
            },
            function(response) {
                $(".timeFilter .hook_line").html("").append("<option selected value='0'>All</option>");
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_line").append("<option value=" + value.availableLines + ">" + value.availableLines + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.getTimeFilterParams = function() {
            var params = {};
            var type = $(".timeFilter .radio:checked").data('type');

            if (parseInt($('.timeFilter .hook_line').val()) > 0) {
                params.line = $('.timeFilter .hook_line').val();
            }

            switch (type) {
                case 'period':
                    params.pStart = $('.timeFilter .hook_dateFrom').val();
                    if ($('.timeFilter .hook_oneDay').is(":checked")) {
                        params.pOneDay = 'oneDay';
                    } else {
                        params.pEnd = $('.timeFilter .hook_dateTo').val();
                    }
                    params.timeFrame = 'period';
                    break;
                case 'month':
                    params.mMonth = $('.timeFilter .hook_mMonth').val();
                    params.mYear = $('.timeFilter .hook_mYear').val();
                    params.timeFrame = 'month';
                    break;
                case 'year':
                    params.yYear = $('.timeFilter .hook_yYear').val();
                    params.timeFrame = 'year';
                    break;
            }
            return params;
        };
        _self.assignEventHandlers = function() {
            $(document).on("click", ".timeFilter button.refresh", function() {
                var params = _self.getTimeFilterParams();
                params.request = 420;
                params.dataType = "json";
                window.chart.prepareAndDrawGant(params, "#gantHolder");
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", ".timeFilter button.refresh");
        };
    };
    if(!window.lHistoryFX){
        window.lHistoryFX = new linesHistoryFX();
        window.lHistoryFX.perform();
        window.lHistoryFX.clearEventHandlers();
        window.lHistoryFX.assignEventHandlers();
    }
    else{
        window.lHistoryFX.perform();
        window.lHistoryFX.clearEventHandlers();
        window.lHistoryFX.assignEventHandlers();
    }
</script>